import Block from "./Block"
import GridSystem from "../GridSystem"
import MyControlPoint from "./MyControlPoint";
import { ControlPoint, BlockType } from "../Constants";

class MyMark extends Block {

    img: img  // 图片对象
    src: string | null // 图片地址

    constructor(src: string | null, x: number = 40, y: number = 40, width: number = 100, height: number = 100) {
        super(x, y, width, height);
        this.src = src;
        this.class = BlockType.IMAGE;
    }

    draw(x: number = 40, y: number = 40, width: number = 100, height: number = 100) {
        let ctx = GridSystem.gls.ctx;
        ctx.save()
        let { x: x1, y: y1 } = this.setAdsorption(x, y, width, height)
        x = x1;
        y = y1;
        this.setAngle(x, y, width, height)
        this.setSizeInfo(x, y, width, height)
        // ------ 公共部分

        ctx.fillStyle = "rgba(0,0,0,0)"
        if (!this.img) {
            this.img = new Image();
            this.img.src = this.src;
            this.img.onload = () => {
                this.drawRect(x, y, width, height)
                ctx.drawImage(this.img, x, y, width, height);
            }
        } else {
            this.drawRect(x, y, width, height)
            ctx.drawImage(this.img, x, y, width, height);
        }

        ctx.restore()

        this.setFocusStyle();
        this.setControlPoints(x, y, width, height);
        this.isDraged = false;
        this.drawLink(x, y, width, height);
        this.update(x, y, width, height)
    }

    setSrc(url:string){
        if(this.img){
            this.img.src = url
        }
    }

}

export default MyMark;